<!-- 地图地点输入联想组件 -->
<template>
    <el-autocomplete 
        :ref="'mpAtInp'"
        prefix-icon="el-icon-map-location"
        popper-class="my-autocomplete"
        clearable
        :popper-append-to-body="false"
        :trigger-on-focus="clickShowList"
        :placeholder="placeholder"
        :fetch-suggestions="querySearchAsync"
        @select="handleSelect"
        @clear="handleClear"
        v-model="address">
        <template slot-scope="{ item }">
            <div class="name" :title="item.name.length > 20 ? item.name : ''">
                {{ item.name }}
                <span class="c-yellow" v-if="item.type == 4">（虚拟）</span>
            </div>
            <span class="addr">
                <template v-if="item.type == 4">无准确地址选择此项</template>
                <template v-else>{{ item.address }}（{{ item.area }}）</template>
            </span>
            <i v-if="item.isSta" class="sta-icon">站</i>
        </template>
    </el-autocomplete>
</template>

<script>
import * as commonService from '@/api/services/common.service';

export default {
  name: 'MapPointInp',
  props: {
    name: {         // 双向绑定名称，可以是xxx.xxx
        require: true,
        type: String
    },
    pindex: {         // 地点所在数组下标，一般是列表数组所需
        type: Number,
        default: 0
    },
    placeholder: {  // 提示文本
        type: String,
        default: '请输入地点关键字'
    },
    defList: {      // 点击展开的默认列表数据
        type: Array,
        default: () => []
    },
    point: {       // 当前选择地点相反地点
        type: Object,
        default: null
    },
    defPoint: {   // 默认的地点
        type: Object,
        default: null
    }
  },
  watch: {
    point(c, o){ // 监听父组件传入的地点
        const that = this;
        
        if(that.name == 'spoint'){
            // 当前点是开始地点：是否显示站点列表
            // 结束地点为空/结束地点没有选择站点
            if(!c || !c.lnglat || !c.isSta){
                that.defs = that.defList;
            }else{
                that.defs = [];
            }
        }else if(that.name == 'epoint'){
            // 当前点是结束地点：是否显示站点列表
            // 开始地点为空/开始地点没有选择站点
            if(!c || !c.lnglat || !c.isSta){
                that.defs = that.defList;
            }else{
                that.defs = [];
            }
        }
    },
    // defPoint(c, o){ // 监听父组件传入的默认地点
    //     const that = this;
    //     // console.log('监听到父组件的值了吗？', c);
    //     that.address = c ? c.name : '';
    // }
    defPoint: {
        handler(c, o){
            this.address = c ? c.name : '';
        },
        deep: true,
    },
  },
  data() { 
    return {
        defs: this.defList,     // 站点列表数组
        clickShowList: this.defList.length > 0 ? true : false,    // 默认点击显示建议面板
        address: this.defPoint ? this.defPoint.name : ''// 选中地点地址
    }
  },
  created(){
    // 获取-焦点

    // setTimeout(() => {
    //     if(this.name == 'amPoints' || this.name == 'pmPoints'){
    //         console.log(this.$refs.mpAtInp);
    //         this.$refs.mpAtInp.$refs.input.focus();
    //     }
    // }, 500);
  },
  methods:{
    // 发送请求查询地址
    querySearchAsync(kw, cb) {
        const that = this;
        
        if(!kw){// 搜索关键字为空，则显示默认列表
            cb(that.defs);
        }else{// 存在搜索关键字，则请求后台获取地图地址
            commonService.getMapPointList({ keywords: kw }).then(res => {
                if(!res || res.code != 1){
                    that.U.qerror(res.msg);
                    cb([]);
                }else {
                    let list = res.data;
                    // console.log('请求数据', list);

                    // let pois = []; // 结果数据列表
                    // // 从列表中过滤符合条件的数据
                    // let staList = that.defs.filter(it => {
                    //     return (it.name.toLowerCase().indexOf(kw.toLowerCase()) !== -1 || it.area.toLowerCase().indexOf(kw.toLowerCase()) !== -1 || it.note.toLowerCase().indexOf(kw.toLowerCase()) !== -1);
                    // });
                    // if(staList.length > 0) pois = staList;
                    
                    let pois = [];
                    // 将请求后的数据，加入至列表
                    list.forEach(it => {
                        if(it.address == '[]') it.address = '';
                        if(it.address instanceof Array) it.address = it.address.join(',');
                        
                        pois.push({
                            id: it.id,              // id
                            lnglat: it.lnglat,      // 坐标
                            area: it.area,          // 区域
                            name: it.name,          // 名称
                            address: it.address,    // 地址
                            type: it.type,          // 地点类型
                            isSta: false            // 是否是站点
                        });
                    });
                    // console.log('结果数据', pois);

                    cb(pois);
                }
            });
        }
    },
    // 点击某项事件
    handleSelect(item) {
        const that = this;
        
        if(that.name == 'spoint' || that.name == 'epoint'){
            that.address = item.name;
        }else{
            // this.$refs.mpAtInp.$refs.input.focus();
        }

        that.$emit('handleSel', {name: that.name, pindex: that.pindex, p: item});
    },
    // 清空输入框值
    handleClear(){
        const that = this;
        
        that.$emit('handleSel', {name: that.name, pindex: that.pindex, p: null});
    }
  }
}
</script>

<style lang="less">
    .my-autocomplete /deep/{
        width: auto !important;

        li{
            position: relative;
            line-height: 20px !important;
            margin-bottom: 10px !important;
        }
    } 
</style>

<style lang="less" scoped>
.my-autocomplete{
    li {
        .name {
            max-width: 20em;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: left;
        }
        .addr {
            display: block;
            max-width: 24em;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 12px;
            color: #b4b4b4;
            text-align: left;
        }

        .highlighted .addr {
            color: #ddd;
        }

        .sta-icon{
            position: absolute;
            bottom: 0px;
            left: 2px;
            color: #ff6300;
            font-size: 16px;
            display: inline-block;
            height: 100%;
            line-height: 40px;
            font-style: normal;
        }
    }
}
</style>